<template>
  <div class="mw-column-style" v-if="JSON.stringify(data.detail) != '{}'">

    <swiper v-if='data.detail.images.length>0' :options="swiperOption" ref="mySwiper"
            style="width:3.75rem;">
      <swiper-slide v-for="(item,index) in data.detail.images" :key="index" id="index">
        <img style="width:3.75rem;" :src="item.image_url"></img>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <video v-if="data.detail.is_video == 1" :src="data.detail.video_url" controls="controls" objectfit="contain" style="width: 3.75rem;">
    </video>
    <div class="mw-row-spacebetween-style mw-main-background-white"
         style="height:0.44rem;width: 3.45rem;padding:0.15rem;align-items: center">
      <div @click="data.skipToUserpage(data.detail.user.id)" class="mw-row-style" style="align-items: center">
        <img class="mw-avatar-style" style="width: 0.44rem;height:0.44rem;border-radius: 0.22rem;"
             :src="data.detail.user.avatar == ''? '/static/defalut_avatar.png':data.detail.user.avatar"></img>
        <div class="mw-single-line mw-first-text-color" style="margin-left:0.04rem;width:1rem;font-size: 0.16rem">
          {{data.detail.user.name}}
        </div>
      </div>
      <div @click.stop="data.follow(data.detail.user.id)" v-if="data.detail.user.followed == 1" class="mw-focus-button-style">已关注</div>
      <div @click.stop="data.follow(data.detail.user.id)" v-else-if="data.detail.user.followed == 0" class="mw-unfocus-button-style">关注</div>
      <div @click.stop="data.follow(data.detail.user.id)" v-else-if="data.detail.user.followed == 2" class="mw-focuseach-button-style">互相关注</div>
    </div>
    <div class="mw-column-style mw-main-background-white" style="width:3.45rem;padding:0.15rem;margin-bottom: 0.5rem;">
      <div class="mw-first-text-color" style="font-size: 0.17rem;font-weight: bold;margin-bottom:0.1rem">
        {{data.detail.title}}
      </div>
      <div class="mw-second-text-color" style="font-size: 0.15rem;margin-bottom:0.1rem;line-height: 1.5">{{data.detail.content}}</div>
      <div class="mw-horizon-divider"></div>
      <div class="mw-column-style" style="width: 3.45rem;">
        <div class="mw-row-style" style="height:0.5rem;align-items: center">
          <div class="mw-first-text-color" style="font-weight: bold;font-size: 0.16rem;">评论</div>
        </div>
        <!--<div class="mw-horizon-divider" style="width: 100%;"></div>-->
        <div @click="data.skipToDownload" v-for="(item,index) in data.commentlist" class="mw-column-style"
             style="align-items:flex-end;width: 100%">
          <div class="mw-row-spacebetween-style" style="margin-top:0.15rem;align-items: flex-start;width: 100%">
            <div class="mw-row-style" style="align-items: flex-start;">
              <img class="mw-avatar-style" style="height:0.34rem;width:0.34rem;border-radius: 50%;"
                   :src="item.user.avatar == ''? '/static/defalut_avatar.png':item.user.avatar"></img>
              <div class="mw-single-line mw-second-text-color"
                   style="margin-left:0.1rem;font-size: 0.13rem;width:2.5rem;">{{item.user.name}}
              </div>
            </div>
            <div class="mw-row-style" style="align-items: center;">
              <img @click.stop="data.commentlike(item)"
                   style="height:0.16rem;width:0.16rem;object-fit:cover;margin-right:0.04rem"
                   :src="item.liked == 1 ? '/static/article_zan.png':'/static/article_unzan.png'"/>
              <div :class="item.liked == 1 ?'mw-main-red ':'mw-second-text-color'" style="font-size: 0.11rem;">
                {{item.liked_total < 10000 ? item.liked_total : (Math.floor(item.liked_total / 10000 * 10) / 10 + 'w')}}
              </div>
            </div>
          </div>
          <div class="mw-column-style" style="width: 3.01rem">
            <div class="mw-n-line mw-first-text-color"
                 style="font-size: 0.17rem;line-height: 1.5;margin-bottom: 0.1rem;width: 100%">{{item.content}}
            </div>
            <div class="mw-main-gray" style="font-size: 0.13rem;line-height: 1.5;margin-bottom: 0.1rem;">
              {{item.created_at}}
            </div>
            <div v-if="item.reply != null" class="mw-column-style mw-background-color"
                 style="width: 2.81rem;border-radius: 0.1rem;padding:0.1rem;">
              <div class="mw-row-style" style="align-items: center;">
                <img class="mw-avatar-style" style="height:0.2rem;width:0.2rem;border-radius: 50%;"
                     :src="item.reply.user.avatar== ''? '/static/defalut_avatar.png':item.reply.user.avatar"></img>
                <div class="mw-single-line mw-third-text-color"
                     style="margin-left:0.08rem;margin-bottom:0.06rem;font-size: 0.13rem;width:2rem;">
                  {{item.reply.user.name}}
                </div>
              </div>
              <div class="mw-n-line mw-first-text-color"
                   style="font-size: 0.13rem;line-height: 1.5;margin-bottom: 0.08rem;width: 100%">{{item.reply.content}}
              </div>
              <div style="color:#5789c2;font-size: 0.13rem;line-height: 1.5;">打开妙汇APP查看全部({{item.comments_total}}条)
              </div>
            </div>
          </div>
        </div>
        <div v-if="data.commentlist.length == 0"  class="mw-column-style"
             style="width: 100%;padding:0.5rem 0;align-items: center">
          <img src="/static/empty.png" style="width: 2rem;height:1rem;margin-bottom: 0.3rem"/>
          <div class="mw-third-text-color" style="font-size: 0.13rem;">太低调了吧 居然没有评论</div>
        </div>
      </div>
    </div>
    <div class="mw-row-style mw-main-background-white"
         style="position:fixed;z-index:1000;bottom:0;align-items:center;width: 3.75rem;height:0.49rem;box-shadow:0 -0.04rem 0.1rem 0 rgba(0,0,0,0.04);">
      <div class="mw-active-rectangle-button "
           style="margin-left:0.15rem;width:1.9rem;height:0.36rem;border-radius: 0.18rem;">
        <div @click="data.skipToDownload" style="font-size:0.12rem;" class="mw-main-red ">打开妙汇APP去评论</div>
      </div>
      <div style="position:relative;margin:0 0.43rem 0 0.31rem">
        <img @click="data.like" style="height:0.24rem;width:0.24rem;object-fit:cover;"
             :src="data.detail.liked == 1 ? '/static/article_zan.png':'/static/article_unzan.png'"/>
        <div class="mw-second-text-color" style="position:absolute;top:0;left:0.24rem;font-size: 0.1rem;width:0.4rem;">
          {{data.detail.liked_total < 10000 ? data.detail.liked_total : (Math.floor(data.detail.liked_total / 10000 * 10) / 10 + 'w')}}
        </div>
      </div>
      <div style="position:relative;margin-right:0.43rem">
        <img @click="data.collect" style="height:0.24rem;width:0.24rem;object-fit:cover;"
             :src="data.detail.collected == 1 ? '/static/collected.png':'/static/article_uncollect.png'"/>
        <div class="mw-second-text-color" style="position:absolute;top:0;left:0.24rem;font-size: 0.1rem;width:0.4rem;">
          {{data.detail.collected_total < 10000 ? data.detail.collected_total : (Math.floor(data.detail.collected_total / 10000 * 10) / 10 + 'w')}}
        </div>
      </div>
      <!--<img style="height:0.24rem;width:0.24rem;object-fit:cover;" src="/static/article_share.png"/>-->
      <!--<div style="position:relative;">-->
        <!--<img style="height:0.24rem;width:0.24rem;object-fit:cover;" src="/static/article_share.png"/>-->
        <!--<div class="mw-second-text-color" style="position:absolute;top:0;left:0.24rem;font-size: 0.1rem;width:0.4rem;">-->
          <!--12-->
        <!--</div>-->
      <!--</div>-->
    </div>
    <!--<v-sharebottom :title="data.detail.title == ''?'我在妙汇发现了一篇笔记':data.detail.title"-->
                   <!--:desc="data.detail.content == ''?'快来看一下吧！':data.detail.content"-->
                   <!--:imgUrl="data.detail.cover_url"-->
                   <!--:link= "sharelink" ref="sharebottom"></v-sharebottom>-->
    <v-backhome enter="notedetail"></v-backhome>
  </div>


</template>

<script>

  import {mapModules, mapRules} from 'vuet'
  import 'swiper/dist/css/swiper.css'
  import utils from '../../utils'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  var vm = null;

  export default {
    mixins: [
      mapModules({data: 'notedetail'}),
      mapRules({store: [{path: 'notedetail'}], need: [{path: 'notedetail'}]}),
    ],

    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
        },
        sharelink:window.location.href
      }
    },

    components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },


    beforeCreate() {

    },
    updated() {

    },
    created() {
      vm = this
    },
    mounted() {
      var that = this
      this.data.needFetch = true

    },
    updated() {
    },
    destroyed() {

    },
    methods: {
//      showSharebottom() {
//        this.$refs.sharebottom.showBackground();
//      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
